<template>
      <div class="wrapper">
            <swiper :options="swiperOption" v-if="showSwiper">
                  <!-- slides -->
                  <swiper-slide v-for="item of list" :key="item.id">
                     <img class="swiper-img" :src="item.imgUrl" />
                  </swiper-slide>
                  <!-- Optional controls -->
                  <div class="swiper-pagination"  slot="pagination"></div>
                <!--
                  轮播中的左箭头
                 <div class="swiper-button-prev" slot="button-prev"></div>
                  轮播中的右箭头
                  <div class="swiper-button-next" slot="button-next"></div>
                  轮播中的灰色线
                  <div class="swiper-scrollbar"   slot="scrollbar"></div>
                  -->
            </swiper>
      </div>
</template>

<script>
    export default {
        name: "HomeSwiper",
        props:{
          list:Array
        },
        data (){
            return{
                swiperOption:{
                    pagination:'.swiper-pagination',//图片轮播时的页码小点
                    loop:true,//使轮播插件进行正常的左右轮播
                    autoplay:2000//自动轮播翻页
                }
                /*
                swiperList:[{
                    id: '0001',
                    imgUrl:'https://img1.qunarzz.com/vc/80/80/1a/72b8f423c33e581ca72fc136da.jpg'
                },{
                    id:'0002',
                    imgUrl:'https://img1.qunarzz.com/vc/b8/25/51/f6173dbd12c1a0f783abe73855.jpg'
                }]
                */
            }
        },
      computed :{
          showSwiper () {
            return this.list.length
          }
      }
    }
</script>

<style lang="stylus" scoped>
      /*>>>:使样式不受scoped的约束，改变轮播时页码小点的颜色*/
    .wrapper >>> .swiper-pagination-bullet-active
      background-color #fff
    .wrapper
       overflow hidden
       width 100%
       height 0
       padding-bottom 31.25%
       background-color #eee
       .swiper-img
         width 100%
</style>